<template>
  <div id="app">
    <flow-editor
      ref="editorRef"
      container-id="editorContainer"
      :options="editorOptions"
      :G6Utils="G6Expand"
    >
      <tool-bar
        :toolBarMenu="toolBarMenu"
        @toolBarClick="toolBarClick"
      />
      <context-menu
        :edgeContextMenu="edgeContextMenu"
        :nodeContextMenu="nodeContextMenu"
        @contextMenuClick="contextMenuClick"
      />
    </flow-editor>
  </div>
</template>
<script>
import { FlowEditor, ToolBar, ContextMenu, G6Utils } from '@/index';
import G6Expand from './G6Expand';
import FlowData from './data';
export default {
  name: 'APP',
  components: { FlowEditor, ToolBar, ContextMenu },
  data() {
    return {
      g6Utils: null,
      editorOptions: {
        defaultNode: {
          type: 'modelRect',
          // size: [185, 70],
          logoIcon: { show: false },
          labelCfg: {
            style: {
              fontSize: 14
            }
          },
          anchorPoints: [[0, 0], [0, 0.5], [0, 1], [0.5, 1], [1, 1], [1, 0.5], [1, 0], [0.5, 0]],
          style: { cursor: 'pointer' }
        }
      },

      edgeContextMenu: [
        { label: '删除边', type: 'deleteEdge', icon: 'el-icon-delete' }
      ],
      nodeContextMenu: [
        { label: '删除节点', type: 'deleteNode', icon: 'el-icon-delete' }
      ],
      toolBarMenu: [
        ...Object.values(G6Utils.DefaultConstant.EnumToolBarType),
        { type: 'zoomIn', label: '放大', icon: 'iconzoomin' },
        { type: 'zoomOut', label: '缩小', icon: 'iconzoomout' }
      ]
    };
  },
  computed: {
    G6Expand: () => G6Expand
  },
  mounted() {
    this.g6Utils = this.$refs.editorRef.g6Utils;
    this.g6Utils.setModelType('edit');
    this.g6Utils.readData({ nodes: FlowData.nodeList, edges: FlowData.directionList });

    // const width = document.querySelector(`#app`).clientWidth;
    // const height = document.querySelector(`#app`).clientHeight;
    // this.g6Utils = new G6Utils().initEditor('app', { width, height, ...this.editorOptions });
    // this.g6Utils.readData({ nodes: FlowData.nodeList, edges: FlowData.directionList });
  },
  methods: {
    contextMenuClick(action, event) {
      if (action === 'deleteEdge' || action === 'deleteNode') {
        const { id } = event.item.getModel();
        this.g6Utils.graph.removeItem(id);
      }
    },
    toolBarClick(action, event) {
      const currentZoom = this.g6Utils.graph.getZoom();
      const centerX = this.g6Utils.graph.getWidth() / 2;
      const centerY = this.g6Utils.graph.getHeight() / 2;
      if (action === 'zoomIn') {
        this.g6Utils.graph.zoomTo(currentZoom + 0.1, { x: centerX, y: centerY });
      } else if (action === 'zoomOut') {
        this.g6Utils.graph.zoomTo(currentZoom - 0.1, { x: centerX, y: centerY });
      }
    }
  }
};
</script>
<style>
  html, body{
    margin: 0;
    width: 100%;
    height: 100%;
  }
#app {
  height: 100%;
  width: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
